<template>
  <div id="app">
      <div class="box">
          <div ref="vantaRef" style="width: 100%; height: 100vh">
    <el-container>
      <el-main style="height: 700px">
        <div style="float: right">
          <el-button type="primary" @click="backToIndex">返回首页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
          <el-card style="width: 550px;height: 700px;background-color: rgba(255,255,255,0.85)">
        <div style="height: 450px;background-position: center;background-repeat: no-repeat;background-size: 100%">
          <div style="width: 400px;height: 400px;margin:50px auto;">
            <el-form :model="user" :rules="rules" ref="user" label-width="80px" >
              <el-form-item>
                <div style="margin-bottom: 0;">
                  <h1 style="float: left;font-size: 28px">欢迎注册</h1>
                  <a style="float: right;
                        text-decoration: none;
                        color: #409EFF;
                        position: relative;
                        top: 60px;
                        margin-right: 30px"
                     @click="toLogin">
                    已有账号？现在登录
                  </a>
                </div>
              </el-form-item>
              <el-form-item label="用户名" prop="username">
                <el-input id="username" v-model="user.username" placeholder="请输入用户名"
                          style="width: 290px">
                </el-input>
              </el-form-item>

              <el-form-item label="手机号" prop="phone">
                <el-input id="phone" v-model="user.phone" placeholder="请输入手机号"
                          style="width: 290px;">
                </el-input>
              </el-form-item>

              <el-form-item label="验证码" style="height: 40px;" prop="code">
                <div style="height: 41.2px;">
                  <el-input id="code" placeholder="请输入图片验证码" v-model="user.code"
                            style="width: 180px; position: relative; top: -15px" class="img"></el-input>
                  <el-image :src="url" style="cursor: pointer; position: relative; left: 6px" class="img"
                            @click="getUrl()"></el-image>
                </div>
              </el-form-item>

              <el-form-item label="短信" prop="sendCode">
                <el-row>
                  <el-col span="14">
                    <el-input id="sendCode" placeholder="请输入短信验证码" v-model="user.sendCode"
                              style="width: 180px;"></el-input>
                  </el-col>
                  <el-col span="10">
                    <el-button id="ver" v-show="show" @click="sendCode">获取验证码</el-button>
                    <el-button disabled="true" v-show="!show"
                               style="cursor: default;">
                      {{ count }}s
                    </el-button>
                  </el-col>
                </el-row>
                <p id="telError" style="color: red;display: none;margin: 0;">请输入正确的手机号</p>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input id="password" v-model="user.password" placeholder="请输入密码" style="width: 290px"
                          type="password">
                </el-input>
              </el-form-item>

              <el-form-item label="确认密码" prop="cpassword">
                <el-input id="cpassword" v-model="user.cpassword" placeholder="请输入确认密码"
                          style="width: 290px"
                          type="password"
                          @keydown.native.enter="reg()">
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="reg('user')">立即注册</el-button>
              </el-form-item>

              <el-form-item label="注册方式">
          <span>
            <el-button icon="el-icon-eleme" @click="regByEmail">使用邮箱注册</el-button>
          </span>
              </el-form-item>
            </el-form>
          </div>
        </div>
          </el-card>
          <div style="position: relative;left: 50%;bottom: 95%">
              <h1 style="font-size: 200px;color: aliceblue;text-shadow: -3px -3px 10px white, 3px 3px 10px black;"><i>Kun吧</i></h1>


          </div>
      </el-main>
    </el-container>
          </div>
      </div>
  </div>

</template>

<script>
// import * as THREE from "three";
import GLOBE from "vanta/src/vanta.globe";
export default {
  data: function () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.user.cpassword !== '') {
          this.$refs.user.validateField('cpassword');
          callback();
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      user: {username: "", password: "", phone: "", code: "", sendCode: "", cpassword: ""},
      phoneCode: {phone: '', code: ''},
      register: {username: '', password: '', phone: '', sendCode: ''},
      url: "",
      show: true,
      count: '',
      timer: null,
      flags: false,

      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {
            min: 6,
            max: 10,
            pattern: /^[a-zA-Z_][a-zA-Z0-9_]{5,9}$/,
            message: '用户名应是6-10位任意字母、数字、下划线,不能以数字开头',
            trigger: 'blur'
          }
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {
            pattern: /^1[3-9]\d{9}$/,    //正则校验不用字符串
            message: "请填写正确的手机号码", trigger: "blur"
          }
        ],
        code: [
          {required: true, message: "请输入图片验证码", trigger: "blur"}
        ],
        sendCode: [
          {required: true, message: "请输入短信验证码", trigger: "blur"}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'},
          {pattern: /^\w{7,31}$/, message: '密码格式错误！必须为8~32位的字母、数字、下划线', trigger: 'blur'}
        ],
        cpassword: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      },
    }
  },
    mounted() {
        this.vantaEffect = GLOBE({
            el: this.$refs.vantaRef,
            THREE: THREE,
        });
        VANTA.GLOBE({
            el: this.$refs.vantaRef,
            /*以下为样式配置*/
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            scale: 1.0,
            scaleMobile: 1.0,
            color: 0xc5c5c5,
            size: 1.1,
            backgroundColor: 0x4300bb,
        });
    },
    beforeDestroy() {
        if (this.vantaEffect) {
            this.vantaEffect.destroy();
        }
    },

  methods: {
    backToIndex() {
      window.location.href = "index.html"
    },
    toLogin() {
      window.location.href = "loginByPassword.html"
    },
    regByEmail() {
      window.location.href = "regByEmail.html"
    },
    reg(formName) {
      this.register.username = this.user.username;
      this.register.password = this.user.password;
      this.register.phone = this.user.phone;
      this.register.sendCode = this.user.sendCode;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/user/registerByPhone'
          this.axios.post(url, this.register).then((response) => {
            if (response.data.code === 1) {
              console.log(response.data);
              this.$message.success(response.data.data);
              window.location.href = "loginByPassword.html"
            } else {
              console.log(response.data);
              this.$message.error(response.data.msg);
            }
          })
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "表单验证失败！",
          });
          console.log('error submit!!');
          return false;
        }
      });

    },

    NumDown() {
      this.show = false;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }


    },
    sendCode() {
      this.phoneCode.phone = this.user.phone;
      this.phoneCode.code = this.user.code;
      let url = '/user/phoneSendMsg';
      this.axios.post(url, this.phoneCode).then((response) => {
        if (response.data.code === 1) {
          console.log(response.data)
          this.$message.success("验证码获取成功!请注意查收");
          this.NumDown();
        } else {
          console.log(response.data)
          this.$message.error(response.data.msg);
        }
      })

    },

    getUrl() {
      // {responseType:'blob'}
      let url = '/kaptcha';
      this.axios.get(url, {responseType: 'blob'}).then((response) => {
        console.log(response.data);
        this.url = window.URL.createObjectURL(response.data);
        console.log(this.url);
      })

    },
  },
  created: function () {
    this.getUrl();
  }
}
</script>

<style>
.bj {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-image: url('http://rww08uahf.hn-bkt.clouddn.com/%E7%99%BB%E5%BD%95%E8%83%8C%E6%99%AF.png');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
</style>
